<template>
  <div :class="prefixCls">
    <BasicForm @register="registerForm" />
  </div>
</template>

<script lang="ts" setup name="SubTableConfig">
  import { watch, onMounted, nextTick } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formItemSchema } from './subTable.data';

  const { prefixCls } = useDesign('SubTableConfig');
  onMounted(() => {});

  const props = withDefaults(
    defineProps<{
      sourceType: string;
      client?: number;
    }>(),
    {
      sourceType: '',
    },
  );
  // , { resetFields, setFieldsValue, validate, updateSchema }
  const [registerForm, { setProps, resetFields, validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    baseColProps: { lg: 11, md: 23 },
    // schemas: formItemSchema,
    showActionButtonGroup: false,
  });
  watch(
    () => props.sourceType,
    (val) => {
      if (val) {
        const schemas = formItemSchema(val, props.client);
        nextTick(() => {
          resetFields();
          setProps({ schemas });
        });
      }
    },
    {
      immediate: true,
    },
  );

  defineExpose({
    async getValues() {
      const data = await validate();
      return data;
    },
    setValues(params: Indexable) {
      nextTick(() => {
        setFieldsValue(params);
      });
    },
  });
</script>
<style lang="less" scoped></style>
